<template>
	<view class="code-box">
		<uni-nav-bar-vue title="" :dark="true" themeBgColor="#1F2130" leftIcon="left" themeColor="#fff"
			@clickLeft="clickLeft"></uni-nav-bar-vue>
		<view class="container">
			<view class="box">
				<view class="logo">
					<image src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/user/logo1.png" class="logo-img"></image>
				</view>
				<view class="sy-box" v-if="!isUser">
					<canvas id="qrcode" canvas-id="qrcode" class="code-img" style="width: 270px;height: 270px;"></canvas>
					<view class="text">会员折扣数字码</view>
					<view class="num">{{code}}</view>
				</view>
				<view class="sy-box" v-else>
					<image src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/user/use.png" class="use"></image>
					<view class="ts">
						尊贵的富侨汇会员: <br />
						今日会员折扣（1次）已使用 <br />
						欢迎再次光临~
					</view>
				</view>
				<image src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/user/dot.png" class="dot"></image>
				<image src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/user/scan.png" class="scan"></image>
				<view class="cs">出示该界面给门店收银获得专属折扣</view>
				<view class="cx">（会员折扣码使用后会重新生成）</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		userScan
	} from '../../api/active.js'
	import UQRCode from "uqrcodejs"
	import uniNavBarVue from "../../uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue"
	export default {
		components: {
			uniNavBarVue
		},
		data() {
			return {
				isUser: false,
				code: ''
			}
		},
		onLoad() {
			this.getCode()
		},
		methods: {
			getCode() {
				userScan({
					path: '/pages/code/code',
					userId: uni.getStorageSync('userId')
				}).then(res => {
					if (res.data) {
						this.isUser = false
						this.createQRCode(res.data)
						this.code = res.data
					} else {
						this.isUser = true
					}
				})
			},
			clickLeft() {
				uni.navigateBack()
			},
			createQRCode(text) {
				// 获取uQRCode实例
				let qr = new UQRCode()
				// 设置二维码内容
				qr.data = text
				// 设置二维码大小，必须与canvas设置的宽高一致
				qr.size = 270
				qr.margin = 0;
				// 调用制作二维码方法
				qr.make()
				// 获取canvas上下文
				var canvasContext = uni.createCanvasContext("qrcode", this) // 如果是组件，this必须传入
				// 设置uQRCode实例的canvas上下文
				qr.canvasContext = canvasContext
				// 调用绘制方法将二维码图案绘制到canvas上
				qr.drawCanvas()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.code-box {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		background: linear-gradient(180deg, #005097, #b4c9dc);
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.container {
		width: 100vw;
		// flex: 1;
		// background: linear-gradient(180deg, #005097, #b4c9dc);
		padding-top: 100rpx;
		padding-bottom: 20rpx;
		display: flex;
		justify-content: center;
		// position: fixed;
		// top: 0;
		// left: 0;
	}

	.box {
		width: 702rpx;
		// height: 100%;
		padding-bottom: 20rpx;
		background: #ffffff;
		border-radius: 20rpx;
		text-align: center;
	}

	.logo {
		width: 187rpx;
		height: 187rpx;
		background: #ffffff;
		border-radius: 50%;
		margin-left: 254rpx;
		margin-top: -93rpx;
		position: relative;

		.logo-img {
			width: 195rpx;
			height: 138rpx;
			position: absolute;
			top: 34rpx;
			left: -8rpx;
		}
	}

	.sy-box {
		height: 715rpx;
	}

	.code-img {
		display: block;
		// width: 470rpx;
		// height: 480rpx;
		margin: 42rpx auto 0 auto;
	}

	.text {
		font-weight: 500;
		font-size: 28rpx;
		color: #999999;
		margin-top: 50rpx;
	}

	.num {
		font-family: DIN;
		font-weight: bold;
		font-size: 97rpx;
		color: #333333;
	}

	.dot {
		width: 601rpx;
		height: 6rpx;
	}

	.scan {
		width: 46rpx;
		height: 47rpx;
		margin: 25rpx auto 0 auto;
		display: block;
	}

	.cs {
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		margin-top: 20rpx;
	}

	.cx {
		font-weight: 500;
		font-size: 24rpx;
		color: #999999;
		margin-top: 18rpx;
	}

	.use {
		width: 347rpx;
		height: 347rpx;
		margin-top: 79rpx;
	}

	.ts {
		font-weight: 500;
		font-size: 34rpx;
		color: #999999;
		margin-top: 76rpx;
		line-height: 1.8;
	}
</style>